import React, { useState, useEffect } from 'react'
import { Card, Form, Input, Button, Table, Popover, Popconfirm, Modal } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { UserOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { reqGetPageList,reqAddRole } from '@/api/acl/aclrole'
export default function Role() {
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      width: 80,
      dataIndex: 'index',
      render: (a, b, index) => {
        return index + 1
      }
    },
    {
      title: '用户名称',
      dataIndex: 'roleName',
    },
    {
      title: '操作',
      width: 250,
      dataIndex: 'control',
      render: () => {               
        return (
          <>
            <Popover content="分配角色" trigger="hover">
              <Button shape="round" type="dashed" icon={<UserOutlined />} />
            </Popover>
            <Popover content="修改用户" trigger="hover">
              <Button shape="round" type="dashed" icon={<EditOutlined />} style={{ marginLeft: 10 }} />
            </Popover>
            <Popover content="删除用户" trigger="hover">
              <Popconfirm title="确定要删除吗" okText="确定" cancelText="取消" >
                <Button shape="round" danger icon={<DeleteOutlined />} style={{ marginLeft: 10 }} />
              </Popconfirm>
            </Popover>
          </>
        )
      }
    },

  ];
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const [form] = Form.useForm();
  // 分页器相关
  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(5);

  // 角色列表
  const [rolesList, setRolesList] = useState()
  // 添加角色的对话框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [as,setAs] = useState()
  // 获取角色列表
  const getPageList = async (page: number, limit: number) => {
    const roleName = form.getFieldsValue()
    let result = await reqGetPageList(page, limit, roleName)
    console.log("角色列表：", result);
    setRolesList(result.items)
  }
  useEffect(() => {
    getPageList(current, pageSize)
  }, [])
  // 搜索
  const searchRole = () => {
    getPageList(current, pageSize)
  }
  // 清空
  const clearAll = () => {
    form.setFieldsValue({ roleName: undefined })
    getPageList(current, pageSize)
  }
  // 添加角色
  const addRole = () => {
    setIsModalOpen(true);   
  }
  const handleOk = async () => {
    await reqAddRole({roleName:as})
    setIsModalOpen(false);
    getPageList(current, pageSize)
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const role = (e:any)=>{
    console.log(e.target.value);
    setAs(e.target.value)
  } 
  return (
    <Card>
      <Form layout="inline" form={form}>
        <Form.Item name="roleName" style={{ width: 200 }} >
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={searchRole}>查询</Button>
          <Button style={{ marginLeft: 10 }} onClick={clearAll}>清空</Button>
        </Form.Item>
      </Form>
      <Form>
        <Form.Item>
          <Button type="primary" style={{ marginTop: 10 }} onClick={addRole}>添加</Button>
        </Form.Item>
      </Form>
      <Table
        rowKey="id"
        rowSelection={rowSelection}
        columns={columns}
        dataSource={rolesList}
        bordered
        pagination={{
          current,
          pageSize,
          total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `总共 ${total} 条`,
          pageSizeOptions: [3, 5, 8, 10]
        }}
      />
      <Modal visible={isModalOpen} onOk={handleOk} onCancel={handleCancel} title="添加新角色" okText="确定"
        cancelText="取消">
        <p>请输入新角色的名称</p>
        <Input onChange={role}/>
      </Modal>
    </Card>
  )

}
